<template>
	<view class="container">
		<myp-navbar :lefts="lefts" :rights="rights" statusNavStyle="background: #efefef; padding:5rpx;border:2rpx soild #e6e6e6; z-index:100"></myp-navbar>
		<view class="list">
			<myp-list ref="myp-list" :showScrollbar="false">
				<myp-list-cell>
					<view class="listCell" @click="toChat($event)">
						<view>
							<image src="../../../../static/img/head.jpg" class="faceImage"></image>
						</view>
						<view class="infomation">
							<text class="infomation-name">阿拉丁神鸡</text>
							<text class="infomation-message">您好</text>
						</view>
						<view class="last">
							<text class="last-time">上午 10:00</text>
						</view>
					</view>
				</myp-list-cell>
			</myp-list>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				lefts: [{
					text: "点点(1)",
					textSize: "l",
					textStyle: "font-weight:bold;"
				}],
				rights: [{
						icon: "search",
						iconStyle: "margin-right:15rpx",
						iconSize: 'll'
					},
					{
						icon: "solid-plus",
						iconSize: 'll'
					}
				]

			}
		},
		methods: {
			toChat(event) {
				console.info(event);
				this.$Router.push({name: "chat_with_friend"});
			}

		}
	}
</script>

<style lang="scss">
	.container {
		width: 750rpx;
		background-color: #EBEBEB;
	}
	.faceImage{
		width: 100rpx;
		height: 100rpx;
		padding: 25rpx;
		border-radius: 25rpx;
	}
	.listCell{
		position: relative;
		display: flex;
		flex-direction: row;
		border-bottom: solid 2rpx #e1e1e1;
		margin-bottom: 10rpx;
		background-color: #FFFFFF;
	}
	.infomation{
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 30rpx;
		&-name{
			font-size: 40rpx;
			padding: 5rpx;
		}
		&-message{
			font-size: 25rpx;
			padding: 5rpx;
			color: #818181;
		}
	}
	.last{
		position: absolute;
		right: 20rpx;
		top: 10rpx;
		&-time{
			font-size: 25rpx;
			color: #818181;
		}
	}
</style>
